<template>
  <div id="balance_recharge">
    <c-title :hide="false" text="转账"></c-title>
    <!-- 优化 新样式-->
    <diyBackGround></diyBackGround>
    <div class="main">
      <div class="txt">当前{{ balanceLang }}：{{ balance }}元</div>
      <div class="detailBox">
        <div class="zhbanlace">
          <div class="title">受让人ID：</div>
          <input type="text" v-model.lazy="transfer_id" placeholder="请输入受让人ID" />
        </div>
        <ul class="personal_info" v-if="memberInfo">
          <li v-if="memberInfo.nickname">
            <span>昵称：</span>
            <span>{{ memberInfo.nickname }}</span>
          </li>
          <li v-if="memberInfo.realname">
            <span>姓名：</span>
            <span>{{ memberInfo.realname }}</span>
          </li>
        </ul>
        <div class="zzPrice">
          <div class="title">转账金额</div>
          <div class="priceInpBox">
            <div class="priceTxt">{{ $i18n.t("money") }}</div>
            <input type="text" v-model="info_form.transfer_money" placeholder="0.00" />
          </div>
          <div class="deduct" v-if="deduct_point && deduct_point.status == 1 && info_form.transfer_money">
            扣除{{fun.getIntegralLang()}}：{{ countDeduct }}
          </div>
        </div>
        <div class="btn" @click="beforeConfirm">确认转账</div>
      </div>
    </div>
    <!-- 优化 end -->
    <!-- <div class="content" v-if="false">
      <ul class="transfer_info">
        <li class="info_a">
          <span>当前{{ balanceLang }}：</span>
          <span>{{ balance }}元</span>
        </li>
        <li class="info_b">
          <span>受让人ID：</span>
          <input type="text" v-model.lazy="transfer_id" placeholder="请输入受让人ID" />
        </li>
      </ul>
      <div class="transfer_sum">
        <span>转账金额</span>
        <div class="sum">{{ $i18n.t("money") }}<input type="text" v-model="info_form.transfer_money" placeholder="" /></div>
      </div>
      <ul class="personal_info" v-if="memberInfo">
        <li>
          <span>昵称：</span>
          <span>{{ memberInfo.nickname }}</span>
        </li>
        <li>
          <span>姓名：</span>
          <span>{{ memberInfo.realname }}</span>
        </li>
      </ul>
      <button type="button" class="btn custom_color" @click="beforeConfirm">确认转账</button>
    </div> -->

    <pay-keyboard :payKeyboardShow.sync="payKeyboardShow" @complete="payComplete"></pay-keyboard>

    <van-dialog v-model="showConfirm" title="" show-cancel-button @confirm="confirm">
      <div class="confirm-transfer-popup">
        <div class="confirm-transfer-popup-li">受让人ID：{{ transfer_id }}</div>
        <div class="confirm-transfer-popup-li">受让人昵称：{{ memberInfo.nickname }}</div>
        <div class="confirm-transfer-popup-li">受让人姓名：{{ memberInfo.realname }}</div>
        <div class="confirm-transfer-popup-li">转账金额：{{ info_form.transfer_money }}</div>
        <div class="confirm-transfer-popup-warn">您是否确定转账？</div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import member_balance_transfer from "./member_balance_transfercontroller";
export default member_balance_transfer;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
#balance_recharge {
  .main {
    margin: 0 0.625rem;
    margin-top: -5.5938rem;

    .txt {
      text-align: left;
      margin-left: 0.4063rem;
    }

    .detailBox {
      margin-top: 0.9375rem;
      background: #fff;
      box-shadow: 0 0.0625rem 0.25rem 0 rgba(7, 11, 33, 0.11);
      border-radius: 0.3125rem;
      padding: 1.25rem 1.3438rem;
      padding-top: 0;

      .btn {
        width: 17.4688rem;
        height: 2.4375rem;
        background: #f15353;
        border-radius: 0.375rem;
        font-size: 0.9688rem;
        text-align: center;
        line-height: 2.4375rem;
        color: #fff;
        margin: 0 auto;
        margin-top: 2.4063rem;
      }

      .zzPrice {
        margin-top: 1rem;

        .title {
          font-size: 0.8125rem;
          color: #333;
          text-align: left;
        }

        .priceInpBox {
          border-bottom: 1px solid #f5f6f8;
          padding-top: 1.5625rem;
          // padding-bottom: 0.8438rem;
          display: flex;

          .priceTxt {
            line-height: 2.5rem;
            font-size: 0.9375rem;
          }

          input {
            height: 100%;
            flex: 1;
            border: none;
            width: 15.625rem;
            margin-left: 1rem;
            font-size: 1.5625rem;
          }
        }
        .deduct{
          text-align: left;
          color: #FA8647;
        }
      }

      .zhbanlace {
        height: 2.9063rem;
        display: flex;
        align-items: center;

        .title {
          flex-shrink: 0;
          font-size: 0.8125rem;
          color: #333;
        }

        input {
          height: 100%;
          flex: 1;
          border: none;
          width: 15.625rem;
          margin-left: 1rem;
          border-bottom: #f5f6f8 1px solid;
        }
      }

      .personal_info {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        font-size: 0.8rem;
        color: #f15353;
        margin-top: 0.5625rem;

        li {
          display: flex;
          font-size: 0.5rem;
          text-align: left;

          span:first-child {
            display: block;
          }
        }

        li:last-child {
          margin-left: 0.625rem;
        }
      }
    }
  }

  .content {
    .transfer_info {
      background: #fff;
      padding-left: 0.875rem;
      font-size: 16px;

      .info_a,
      .info_b {
        line-height: 2.875rem;
        border-bottom: solid 0.0625rem #ebebeb;
        display: flex;
        justify-content: flex-start;

        span:first-child {
          width: 6.875rem;
          display: block;
          text-align: left;
        }

        input {
          border: none;
          width: 15.625rem;
        }
      }
    }

    .transfer_sum {
      background: #fff;
      padding: 0.625rem 0.875rem;

      span {
        display: block;
        font-size: 16px;
        line-height: 2.5rem;
        text-align: left;
      }

      .sum {
        text-align: left;
        font-size: 24px;

        input {
          margin-left: 0.375rem;
          line-height: 3.75rem;
          width: 90%;
          font-size: 36px;
          border: none;
        }
      }
    }

    .btn {
      width: 21.5625rem;
      margin: 1.25rem auto;
      height: 2.875rem;
      border-radius: 0.25rem;
      font-size: 16px;
      color: #fff;
      background: #f15353;
      border: none;
    }
  }

  .my_wrapper {
    background: #fff;
    overflow: hidden;
    display: flex;
    padding: 0 0.875rem;

    span {
      text-align: left;
      font-size: 16px;

      /* line-height: 1; */
    }

    .my-value {
      flex: 2;
      text-align: left;

      span {
        color: #f15353;
      }
    }
  }

  #wrapper {
    border-bottom: solid 0.0625rem #d9d9d9;
    margin-top: 0.625rem;
  }

  .confirm-transfer-popup {
    padding: 1rem;

    .confirm-transfer-popup-li {
      font-size: 12px;
      text-align: left;
      margin-bottom: 10px;
    }

    .confirm-transfer-popup-warn {
      text-align: center;
      color: #f15353;
      font-size: 16px;
    }
  }
}
</style>
